<template>
  <div
    class="margic"
    :style="{
      marginTop:styles.marginTop+'px',
       marginBottom:styles.marginBottom+'px',
        marginLeft:styles.marginLR+'px',
         marginRight:styles.marginLR+'px',}"
  >
    <div v-show="styles.type==1" class="margic-style-one">
      <div :style="{borderRadius:styles.circle+'px',height:styles.height+'px'}">
        <el-image
          v-if="styles.imgList1[0].img!=''"
          style="width: 100%; height: 100%"
          :src="styles.imgList1[0].img"
          fit="cover"
        ></el-image>
        <span v-else>宽度375px</span>
      </div>
      <div :style="{marginLeft:styles.shifting+'px',borderRadius:styles.circle+'px',height:styles.height+'px'}">
        <el-image
          v-if="styles.imgList1[1].img!=''"
          style="width: 100%; height: 100%"
          :src="styles.imgList1[1].img"
          fit="cover"
        ></el-image>
        <span v-else>宽度375px</span>
      </div>
    </div>
    <div v-show="styles.type==2" class="margic-style-two">
      <div :style="{borderRadius:styles.circle+'px',height:styles.height+'px'}">
        <el-image
          v-if="styles.imgList1[0].img!=''"
          style="width: 100%; height: 100%"
          :src="styles.imgList1[0].img"
          fit="cover"
        ></el-image>
        <span v-else>宽度250px</span>
      </div>
      <div :style="{marginLeft:styles.shifting+'px',marginRight:styles.shifting+'px',borderRadius:styles.circle+'px',height:styles.height+'px'}">
        <el-image
          v-if="styles.imgList1[1].img!=''"
          style="width: 100%; height: 100%"
          :src="styles.imgList1[1].img"
          fit="cover"
        ></el-image>
        <span v-else>宽度250px</span>
      </div>
      <div :style="{borderRadius:styles.circle+'px',height:styles.height+'px'}">
        <el-image
          v-if="styles.imgList1[2].img!=''"
          style="width: 100%; height: 100%"
          :src="styles.imgList1[2].img"
          fit="cover"
        ></el-image>
        <span v-else>宽度250px</span>
      </div>
    </div>
    <div v-show="styles.type==3" class="margic-style-three" :style="{height:styles.height+'px'}">
      <div :style="{borderRadius:styles.circle+'px',height:styles.height+'px'}">
        <el-image
          v-if="styles.imgList1[0].img!=''"
          style="width: 100%; height: 100%"
          :src="styles.imgList1[0].img"
          fit="cover"
        ></el-image>
        <span v-else>375x750像素或同等比例</span>
      </div>
      <div :style="{marginLeft:styles.shifting+'px'}">
        <div :style="{borderRadius:styles.circle+'px',height:styles.height/2+'px'}">
          <el-image
            v-if="styles.imgList1[1].img!=''"
            style="width: 100%; height: 100%"
            :src="styles.imgList1[1].img"
            fit="cover"
          ></el-image>
          <span v-else>375x375像素或同等比例</span>
        </div>
        <div :style="{marginTop:styles.shifting+'px',borderRadius:styles.circle+'px',height:(styles.height-styles.shifting)/2+'px'}">
          <el-image
            v-if="styles.imgList1[2].img!=''"
            style="width: 100%; height: 100%"
            :src="styles.imgList1[2].img"
            fit="cover"
          ></el-image>
          <span v-else>375x375像素或同等比例</span>
        </div>
      </div>
    </div>
    <div v-show="styles.type==4" class="margic-style-four">
      <div :style="{marginBottom:styles.shifting+'px',borderRadius:styles.circle+'px',height:styles.height+'px'}">
        <el-image
          v-if="styles.imgList1[0].img!=''"
          style="width: 100%; height: 100%"
          :src="styles.imgList1[0].img"
          fit="cover"
        ></el-image>
        <span v-else>750x375像素或同等比例</span>
      </div>
      <div>
        <div :style="{marginRight:styles.shifting+'px',borderRadius:styles.circle+'px',height:styles.height+'px'}">
          <el-image
            v-if="styles.imgList1[1].img!=''"
            style="width: 100%; height: 100%"
            :src="styles.imgList1[1].img"
            fit="cover"
          ></el-image>
          <span v-else>375x375像素或同等比例</span>
        </div>
        <div :style="{borderRadius:styles.circle+'px',height:styles.height+'px'}">
          <el-image
            v-if="styles.imgList1[2].img!=''"
            style="width: 100%; height: 100%"
            :src="styles.imgList1[2].img"
            fit="cover"
          ></el-image>
          <span v-else>375x375像素或同等比例</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "margic",
  data() {
    return {};
  },
  props: ["styles"],
};
</script>


<style lang="less" scoped>
@import url("../../../assets/css/base.less");
.margic {
  overflow: hidden;
}
.margic-style-one {
  display: flex;
  > div {
    width: 50%;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #fff;
    overflow: hidden;
  }
  > div:nth-of-type(2) {
    border-left: 0;
  }
}
.margic-style-two {
  display: flex;
  justify-content: space-around;
  > div {
    width: 33.33%;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #fff;
    overflow: hidden;
  }
}
.margic-style-three {
  display: flex;
  >div{
    overflow: hidden;
  }
  > div:nth-of-type(1) {
    width: 50%;
    border: 1px solid #eee;
    border-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    > span {
      display: block;
      width: 90px;
    }
  }
  > div:nth-of-type(2) {
    width: 50%;
    > div {
      width: 180px;
      height: 180px;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #fff;
      overflow: hidden;
      > span {
        display: block;
        width: 90px;
      }
    }
    > div:nth-of-type(1) {
      border-bottom: 0;
    }
  }
}
.margic-style-four {
  >div{
    overflow: hidden;
  }
  > div:nth-of-type(1) {
    width: 100%;
    height: 180px;
    border: 1px solid #eee;
    border-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 0;
    background-color: #fff;
    > span {
      display: block;
      width: 90px;
    }
  }
  > div:nth-of-type(2) {
    display: flex;
    > div {
      width: 50%;
      height: 180px;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #fff;
      overflow: hidden;
      > span {
        display: block;
        width: 90px;
      }
    }
    > div:nth-of-type(1) {
      border-right: 0;
    }
  }
}
</style>
